<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-image: linear-gradient(to right bottom,red,pink,cyan);
            /* 边框 width style color */
            border: 5px solid orange ;
            /* border-top-style: dashed ; */
            /* border-top-color: brown; */
            /* 内边距 */
            /* 上下左右内边距为10px */
            padding: 10px;
            /* 上下内边距为10px 左右内边距为20px */
            padding: 10px 20px;
            /* 上10px 左右20px 右30px */
            padding: 10px 20px 30px;
            /* 上→右→下→左 */
            padding: 10px 20px 30px 40px;
        }
        div{
            /* 设置盒模型 */
            /* 元素默认都是内容盒子 */
            width: 100px;
            height: 100px;
            border: 3px solid red;
            margin: 17px 34px 26px;
            padding:23px 19px 27px;
        }
        .border{
            /* 设置边框盒子 */
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            background-color: orange;
            border: 2px solid pink;
            margin: 17px 29px 36px;
            padding: 15px 43px 21px;
        }
        /* 盒模型
            盒子种类
                1.内容盒子 标准盒子 w3c盒子
                    盒子计算公式：
                        盒子宽：144px 内容区width100 + 左右内边距19*2 + 左右边框6
                        盒子高：155px 内容区height100 + 左右内边距23+27 + 左右边框6
                        盒子所占页面宽：212px 盒子宽144 + 左右外边距34*2
                        盒子所占页面高：199px 盒子高155 + 上下外边距17+26
                        
                2.边框盒子 怪异盒子 ie盒子
                        盒子宽：100px 内容区width10 + 左右内边距43*2 + 左右边框4
                        盒子高：100px 内容区height60 + 左右内边距15+21 + 左右边框4
                        盒子所占页面宽：158px 盒子宽100 + 左右外边距29*2
                        盒子所占页面高：153px 盒子高100 + 上下外边距17+36
            盒子区别
               width和height区别
               内容盒子的width和height是设置给内容区
               边框盒子的width和height是设置给盒子本身的            
                */
    </style>
</head>
<body>
    <div>内容盒子</div>
    <div class="border">边框盒子</div>
</body>
</html>